<template>
    <div class="stepform-container">
        <Introduce title="分步表单">
            <template #introduce>
                用于多步,分段式任务的数据收集
            </template>
        </Introduce>
        

        <div class="step-form">
            <el-steps :active="active" finish-status="success">
                <el-step title="输入信息" ></el-step>
                <el-step title="确认信息" ></el-step>
                <el-step title="转账成功" ></el-step>
            </el-steps>

            <el-form v-show="active == 1" class="form" label-width="80px">
                <el-form-item label="转账账户">
                    <el-input v-model="form.username"></el-input>
                </el-form-item>
                <el-form-item label="转账人">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                 <el-form-item label="金额">
                    <el-input v-model="form.money">
                        <template #prepend>￥</template>
                    </el-input>
                </el-form-item>
            </el-form>

            <div class="show-data"  v-show="active == 2" >
                <div>账户名: {{form.username}}</div>
                <div>姓名: {{form.name}}</div>
                <div>转账金额: {{form.money}}</div>
            </div>

            <div class="success-data"  v-show="active == 3" >
                <div class="title">
                    <h2>转账成功</h2>
                    <div>预计五分钟之内到账</div>
                </div>
                <div>账户名: {{form.username}}</div>
                <div>姓名: {{form.name}}</div>
                <div>转账金额: {{form.money}}</div>
            </div>

            
            <div class="btn-group">
                <el-button style="margin-top: 12px;" v-if="active != 3" type="primary" @click="next">下一步</el-button>
                <el-button style="margin-top: 12px;" v-else type="primary" @click="next">再转一笔</el-button>
                <el-button v-show="active == 2"  style="margin-top: 12px;" @click="before">上一步</el-button>
            </div>
       

        </div>
       
    </div>
  
</template>

<script>
import { reactive, ref } from 'vue'
export default {
    setup(){
        const active = ref(1)

        const next = ()=>{
            active.value ++
            if(active.value > 3){
                active.value = 1;
            }
        }

        const form = reactive({
            username: '233333@qq.com',
            name: '阿梓梓梓喵酱',
            money: 30000
        })

        const before = ()=>{
            active.value --
             if(active.value < 1){
                active.value = 1
            }
        }

        return {
            active,next,form,before
        }
    }
}
</script>

<style lang="scss" scoped>
.stepform-container{


    .step-form{
        max-width: 600px;
        margin: auto;

       .form{  
           padding: 0 20px 0 10px;
       }

       .show-data{
           font-size: 14px;
           margin-top: 60px;
           padding: 0 20px 0 10px;
           div{
               margin-bottom: 16px;
               text-align: center;
           }
       }

       .success-data{
           margin-top: 60px;
           padding: 0 20px 0 10px;

           .title{
               margin-bottom: 30px;
               div{
                   font-size: 12px;
                   color: #8c8c8c;
               }
           }

           div{
               margin-bottom: 16px;
               text-align: center;
                font-size: 14px;
           }
       }

       .btn-group{
           display: flex;
           justify-content: center;
       }
    }
}

</style>